<template>
  <div>
    <div class="case-wrap" v-for="(item, index) in list" :key="index">
      <div class="img-box">
        <img src="../../assets/img/anli12201130.jpg" style="height: 100%;" />
      </div>
      <div class="case-content-box">
        <p class="case-title">{{ item.title }}</p>
        <p class="case-subtitle">
          {{ item.subtitle }}
        </p>
        <a class="case-details" href="#/CaseDetails">查看详情</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CaseList",
  props: {},
  data() {
    return {
      list: [
        {
          title: "中国电信IDC/ISP信息安全管理系统案例",
          subtitle:
            "目前，百卓网络已为中国电信建设了六期IDC/ISP信息安全管理系统"
        },
        {
          title: "中国电信IDC/ISP信息安全管理系统案例",
          subtitle:
            "目前，百卓网络已为中国电信建设了六期IDC/ISP信息安全管理系统"
        },
        {
          title: "中国电信IDC/ISP信息安全管理系统案例",
          subtitle:
            "目前，百卓网络已为中国电信建设了六期IDC/ISP信息安全管理系统"
        }
      ],
      clickDropDown: null
    };
  },
  methods: {
    onclickDown(index, item) {
      if (index == this.clickDropDown) {
        this.clickDropDown = null;
      } else {
        this.clickDropDown = index;
      }
    }
  }
};
</script>

<style lang="scss">
.case-wrap {
  width: 80%;
  position: relative;
  border-bottom: #ccc 1px solid;
  padding: 2rem 0;
  margin: 0 auto;
}

.case-content-box {
  height: 10rem;
  margin-left: 16rem;
  padding: 0.5rem 0;
  .case-title {
    font-size: 1.5rem;
    font-weight: 400;
  }
  .case-subtitle {
    margin-top: 1.5rem;
  }
  .case-details {
    position: absolute;
    bottom: 3rem;
    color: #005aaa !important;
    font-weight: 400;
  }
  .case-details::after {
    content: ">";
  }
}
.img-box {
  float: left;
  height: 9.6rem;
}
@media all and (max-width: 991px) {
  .case-wrap {
    width: 100%;
    position: relative;
    border-bottom: #ccc 1px solid;
    padding: 2rem 0;
    margin: 0 auto;
  }

  .case-content-box {
    height: 10rem;
    margin-left: 15rem;
    padding: 0.5rem 0;
    .case-title {
      font-size: 19px;
      font-weight: 400;
    }
    .case-subtitle {
      margin-top: 0.8rem;
    }
    .case-details {
      position: absolute;
      bottom: 3rem;
      color: #005aaa !important;
      font-weight: 400;
    }
    .case-details::after {
      content: ">";
    }
  }
  .img-box {
    float: left;
    height: 9.6rem;
  }
}
</style>
